<template>
	<view class="box">
		<u--image width="750rpx" height="500rpx" src="/static/image/forget-bg.png"></u--image>
		<view class="content">
			<view class="d-flex d-text-center d-row-between step">
				<view class="item active">
					<view class="num d-flex d-row-center">1</view>
					<view class="name d-font-32">第一步</view>
					<view class="des d-font-24">验证手机号</view>
				</view>
				<view class="item" :class="step > 0 ? 'active' : ''">
					<view class="num d-flex d-row-center">2</view>
					<view class="name d-font-32">第二步</view>
					<view class="des d-font-24">密码修改成功</view>
				</view>
			</view>
			<view class="form" v-if="step == 0">
				<view class="title">验证手机</view>
				<view class="d-font-24 d-m-t-10" style="color: #5D6672;">请完善以下信息，立即激活账号</view>
				<view class="d-m-t-70">
					<view class="d-p-t-30 u-border-bottom d-flex">
						<view class="d-flex-1"><u--input v-model="form.phone" style="padding: 0;height: 100rpx;" placeholder="手机号" border="none" clearable></u--input></view>
						<view class="d-flex">
							<u-line direction="col" length="50rpx"></u-line>
							<text class="d-font-28 d-m-l-30" style="color: #162233;">获取验证码</text>
						</view>
					</view>
					<view class="d-p-t-30"><u--input v-model="form.code" style="padding: 0;height: 100rpx;" border="bottom" placeholder="请输入验证码" clearable></u--input></view>
					<view class="d-p-t-30">
						<u--input v-model="form.password" style="padding: 0;height: 100rpx;" border="bottom" placeholder="请输入密码" password clearable></u--input>
					</view>
					<view class="d-p-t-30">
						<u--input v-model="form.re_password" style="padding: 0;height: 100rpx;" border="bottom" placeholder="请再次输入密码" password clearable></u--input>
					</view>
					<view class="d-m-t-60 d-flex d-row-between">
						<view class="d-flex-1"><u-button text="取消" @click="back" shape="circle"></u-button></view>
						<view class="d-flex-1 d-m-l-40"><u-button @click="step = 1" text="下一步" shape="circle" type="primary"></u-button></view>
					</view>
				</view>
			</view>
			<view class="success" v-else>
				<view class="d-flex d-col-center d-row-center"><u--image src="/static/image/success.png" width="543rpx" height="456rpx"></u--image></view>
				<view class="d-flex d-col-center d-row-center d-m-t-30">
					<u--image src="/static/icon/icon-01.png" width="48rpx" height="48rpx"></u--image>
					<text class="d-font-32 d-m-l-20">修改成功，请立即登录。</text>
				</view>
				<view class="d-m-t-50 d-p-b-80 d-text-center"><u-button style="width: 500rpx;" text="登录" type="primary" shape="circle" @click="login"></u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			step: 0,
			form: {}
		};
	},
	onUnload() {
		// todo 这里清空定时器
	},
	methods: {
		back() {
			uni.$u.route({ type: 'back' });
		},
		login() {
			uni.$u.route({ url: '/pages/login/login' });
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	.box {
		min-height: 100%;
		.content {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			overflow: auto;
			.step {
				margin-top: 170rpx;
				padding: 0 170rpx;
				.item {
					.num {
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						border: 4rpx solid #adb4bd;
						font-size: 24rpx;
						font-weight: bold;
						color: #adb4bd;
						margin: auto;
					}
					.name {
						font-weight: bold;
						color: #adb4bd;
						margin-top: 8rpx;
					}
					.des {
						color: #adb4bd;
					}
					&:first-child {
						position: relative;
						&:before {
							content: '';
							width: 160rpx;
							border-bottom: 2rpx solid #dfdfdf;
							position: absolute;
							top: 25rpx;
							right: -160rpx;
						}
					}
				}
				.active {
					.num {
						color: #21a5f3;
						border-color: #21a5f3;
					}
					.name {
						color: #162233;
					}
					.des {
						color: #5d6672;
					}
				}
			}
			.form {
				padding: 100rpx 64rpx 100rpx;
				.title {
					font-size: 48rpx;
					font-weight: bold;
					line-height: 48rpx;
				}
			}
			.success {
				padding-top: 250rpx;
			}
		}
	}
}
</style>
